<template>
  <div>
    <t-drawer
        v-model:visible="visible"
        :onClose="onClose"
        :size="622"
        close-btn
    >
      <template #header>
        <div>{{ drawerTitle }}</div>
      </template>
      <div class="formBox">
        <t-form
            ref="form"
            :data="formData"
            :rules="DOT_RULES"
            @submit="handleSubmit"
        >
          <div class="lineTitle">
            <span class="line"></span>
            <span class="title">基本信息</span>
          </div>

          <t-form-item label="质检点名称" name="name" :label-align="'top'">
            <t-input v-model="formData.name" v-noSpace="formData.name" placeholder="请输入质检点名称" :maxlength="25" show-limit-number></t-input>
          </t-form-item>

          <div class="lineTitle">
            <span class="line"></span>
            <span class="title">质检点类型</span>
          </div>

          <t-form-item label="检测类型" name="type" :label-align="'top'">
            <t-radio-group v-model="formData.type" @change="radioChange">
              <t-radio :value="0">词类</t-radio>
              <t-radio :value="1">正则</t-radio>
              <t-radio :value="2">插话抢话</t-radio>
              <t-radio :value="4">冷场</t-radio>
              <t-radio :value="3">语速</t-radio>
            </t-radio-group>
          </t-form-item>

          <div class="lineTitle">
            <span class="line"></span>
            <span class="title">检测方式</span>
          </div>

<!--          词类检测方式-->
          <t-form-item v-if="formData.type === 0" label="选择词类" name="wordId" :label-align="'top'">
            <t-select v-model="formData.wordId">
              <t-option v-for="item in wordOptions" :key="item.id" :label="item.name" :value="item.id" />
            </t-select>
          </t-form-item>
          <t-form-item v-if="formData.type === 0" label="逻辑关系" name="wordFrequency" :label-align="'top'">
            <t-radio-group v-model="formData.wordFrequency" class="c_label">
              <t-radio :value="1">包含任意一个关键词</t-radio>
              <t-radio :value="-1">包含全部关键词</t-radio>
              <t-radio :value="0">
              </t-radio>
            </t-radio-group>
            <t-space class="c_space" style="gap: 4px;line-height: 28px">
              包含任意
              <t-input-number theme="normal" v-model="wordNum" :min="2" style="width: 60px;"></t-input-number>
              个关键词
            </t-space>
          </t-form-item>

<!--          正则检测方式-->
          <t-form-item v-if="formData.type === 1" label="命中" name="matchingRegular" :label-align="'top'">
            <t-input v-model="formData.matchingRegular" placeholder="请输入正则表达式"></t-input>
          </t-form-item>
          <t-form-item v-if="formData.type === 1" label="排除" name="unmatchedRegular" class="excludeIcon" :label-align="'top'">
            <t-input v-model="formData.unmatchedRegular" placeholder="请输入正则表达式"></t-input>
            <span class="tipBox" style="display: none">
              <t-tooltip content="">
                <svg-icon
                    :name="'icon-question'"
                    class-name="question-svg-icon"
                ></svg-icon>
              </t-tooltip>
            </span>
          </t-form-item>
          <t-form-item v-if="formData.type !== 0" label="检测范围" name="qualitySpace" class="rangeBox" requiredMark :label-align="'top'">
<!--            正则-->
            <t-space style="gap: 4px;" v-if="formData.type === 1">
              <span>至少命中</span>
              <t-input-number
                  v-model="formData.regularFrequency"
                  theme="normal"
                  :min="1"
                  placeholder=""
                  style="width: 60px;">
              </t-input-number>
              <span>次</span>
            </t-space>

<!--            插话抢话-->
            <div id="speakBox" v-if="formData.type === 2">
              <span>抢话时间>=</span>
              <t-input-number theme="normal" v-model="competeTime" class="input1" suffix="秒" placeholder="输入数值"></t-input-number>
              <svg-icon
                  :name="'icon-question'"
                  class-name="question-svg-icon"
              ></svg-icon>
              <t-select v-model="competeLogic" class="select1" placeholder="请选择">
                <t-option key="0" label="或" value="0" />
                <t-option key="1" label="和" value="1" />
              </t-select>
              <span>抢话句子的字数>=</span>
              <t-input-number theme="normal" v-model="competeCount" class="input2" suffix="个字" placeholder="输入数值"></t-input-number>
              <svg-icon
                  :name="'icon-question'"
                  class-name="question-svg-icon"
              ></svg-icon>
              <span>时算做命中</span>
            </div>

<!--            冷场-->
            <div id="coolSpace" v-if="formData.type === 4">
              <span>静音时长>=</span>
              <t-input-number theme="normal" v-model="silent" class="input1" suffix="秒" placeholder="输入数值"></t-input-number>
              <svg-icon
                  :name="'icon-question'"
                  class-name="question-svg-icon"
              ></svg-icon>
              <span>时算做命中</span>
            </div>

<!--            语速-->
            <div id="speakTime" v-if="formData.type === 3">
              <span>语速每分钟超过</span>
              <t-input-number theme="normal" v-model="speed" class="input1" suffix="个字" placeholder="输入数值"></t-input-number>
              <svg-icon
                  :name="'icon-question'"
                  class-name="question-svg-icon"
              ></svg-icon>
              <span>时算做命中</span>
            </div>
          </t-form-item>

          <t-form-item class="submitBox">
            <t-space size="small">
              <t-button theme="default" variant="base" @click="handleCancel">取消</t-button>
              <t-button theme="primary" type="submit">保存</t-button>
            </t-space>
          </t-form-item>
        </t-form>
      </div>
      <!--      自定义 footer 不可删除-->
      <template #footer>
      </template>
    </t-drawer>
  </div>
</template>

<script setup lang="jsx">
import {getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
import {
  wordList,
  newPoint,
  detailPoint,
  editPoint
} from '@/api/qualitySet/dotManager.js'
import cache from '@/utils/cache.js'
import {MessagePlugin} from "tdesign-vue-next";

const pageInstance = getCurrentInstance()
const emit = defineEmits()
const props = defineProps({
  drawerVisible: Boolean,
  resetDrawerVisible: Function,
  refreshTable: Function,
  drawerTitle: String,
  infoData: {
    type: Object,
    default: {}
  },
  rowData: {
    type: Object,
    default: {}
  }
})

// 获取词类列表
const wordOptions = ref([])
const getWordList = () => {
  let id = JSON.parse(cache.getLocalstorage('authInfo'))['agencyId']
  wordList(id).then(res => {
    wordOptions.value = res.data
  })
}

const DOT_RULES = {
  name: [{ required: true, message: '请输入质检点名称' }],
  type: [{ required: true, message: '请选择质检点' }],
  wordId: [{ required: true, message: '请选择词类' }],
  wordFrequency: [{ required: true, message: '请选择逻辑关系' }],
  matchingRegular: [{ required: true, message: '请输入正则表达式' }],
  silent: [{ required: true, message: '请输入静音时长' }],
}
const formData = reactive({
  projectId: JSON.parse(cache.getLocalstorage('authInfo'))['agencyId'],
  name: '',
  type: 0,
  wordId: null,
  wordFrequency: 1,
  matchingRegular: '',
  unmatchedRegular: '',
  regularFrequency: 1,
})
const visible = ref(false);
watch(() => props.drawerVisible, (newVal, oldVal) => {
  if(newVal.toString() === 'true') {
    getWordList()

    // 编辑调用详情接口
    if(Object.keys(props.rowData).length > 0) {
      detailPoint(props.rowData['id']).then(res => {
        nextTick(() => {
          formData.id = props.rowData['id']
          formData.name = res.data.name
          formData.type = res.data.type
          if(formData.type === 0) { // 词类
            formData.wordId = res.data.wordId
            if(res.data.wordFrequency === 1 || res.data.wordFrequency === -1) {
              formData.wordFrequency = res.data.wordFrequency
            } else {
              formData.wordFrequency = 0
              wordNum.value = res.data.wordFrequency
            }
          } else if(formData.type === 1) { // 正则
            formData.matchingRegular = res.data.matchingRegular
            formData.unmatchedRegular = res.data.unmatchedRegular
          } else if (formData.type === 2) { // 插话抢话
            competeTime.value = res.data.competeTime
            competeLogic.value = res.data.competeLogic.toString()
            competeCount.value = res.data.competeCount
          } else if(formData.type === 4) { // 冷场
            silent.value = res.data.silent
          } else if(formData.type === 3) { // 语速
            speed.value = res.data.speed
          }
        })
      })
    } else { // 新增重置form
      nextTick(() => {
        // 重置输入框
        formData.type = 0
        formData.wordFrequency = 1
        wordNum.value = null
        formData.regularFrequency = 1
        competeTime.value = null
        competeLogic.value = null
        competeCount.value = null
        silent.value = null
        speed.value = null
      })
    }
  }
  visible.value = props.drawerVisible
})
const wordNum = ref(null) // 词类自定义数量
const competeTime = ref( null) // 抢话时间
const competeLogic = ref(null) // 抢话逻辑
const competeCount = ref(null) // 抢话字数
const silent = ref(null) // 冷场
const speed = ref(null) // 语速
const handleSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    formData.ruleId =  props.infoData['ruleId']
    // 判断检测类型
    if(formData.type === 0 && formData.wordFrequency === 0) { // 词类
      if(!wordNum.value) {
        MessagePlugin.error('请输入检测关键词个数！');
        return
      } else if(wordNum.value < 2 ) {
        MessagePlugin.error('检测关键词个数需大于1！');
        return
      } else {
        formData.wordFrequency = JSON.parse(JSON.stringify(wordNum.value))
      }
    } else if (formData.type === 1) { // 正则
      if(!formData.regularFrequency || formData.regularFrequency < 1 ) {
        MessagePlugin.error('命中次数大于或等于 1 ！');
        return
      }
    } else if(formData.type === 2) { // 插话/抢话
      if(competeTime.value === null || competeTime.value === undefined) {
        MessagePlugin.error('请输入抢话时间！');
        return
      } else if(competeLogic.value === null || competeLogic.value === undefined) {
        MessagePlugin.error('请选择抢话逻辑！');
        return
      } else if(competeCount.value === null || competeCount.value === undefined) {
        MessagePlugin.error('请输入抢话字数！');
        return
      }
      formData.competeTime = competeTime.value
      formData.competeLogic = competeLogic.value
      formData.competeCount = competeCount.value
    } else if(formData.type === 4) { // 冷场
      if(silent.value === null || silent.value === undefined) {
        MessagePlugin.error('请输入静音时长！');
        return
      }
      formData.silent = silent.value
    } else if(formData.type === 3) {
      if(speed.value === null || speed.value === undefined) {
        MessagePlugin.error('请输入语速字数！');
        return
      }
      formData.speed = speed.value
    }
    // 判断是编辑还是详情
    if(Object.keys(props.rowData).length > 0) { // 编辑
      editPoint(formData).then(res => {
        if(res.code === 0) {
          pageInstance.refs.form.reset()
          formData.type = 0
          formData.wordFrequency = 1
          wordNum.value = null
          emit('resetDrawerVisible', false)
          emit('refreshTable')
          MessagePlugin.success('编辑成功！');
        }
      }).catch(error => {
        // 超出字数后 重置选择自定义类型
        formData.wordFrequency = 0
        console.log(error)
      })
    } else { // 新增
      if(formData.id) delete formData.id
      newPoint(formData).then(res => {
        if(res.code === 0) {
          pageInstance.refs.form.reset()
          formData.type = 0
          formData.wordFrequency = 1
          wordNum.value = null
          emit('resetDrawerVisible', false)
          emit('refreshTable')
          MessagePlugin.success('新增成功！');
        }
      }).catch(error => {
        // 超出字数后 重置选择自定义类型
        formData.wordFrequency = 0
        console.log(error)
      })
    }
  }
}
const handleCancel = () => {
  pageInstance.refs.form.reset()
  emit('resetDrawerVisible', false)
}

// 类型改变 防止后端多存数据 导致回显问题
const radioChange = (checkedValues) => {
  formData.wordId = null
  formData.wordFrequency = 1
  formData.matchingRegular = ''
  formData.unmatchedRegular = ''
  formData.regularFrequency = 1
  wordNum.value = null
  competeTime.value = null
  competeLogic.value = null
  competeCount.value = null
  silent.value = null
  speed.value = null
}
const onClose = () => {
  pageInstance.refs.form.reset()
  emit('resetDrawerVisible', false)
}
</script>

<style lang="scss" scoped>
:deep(.t-drawer__body) {
  padding: 23px 0;
}
:deep(.t-drawer__footer) {
  height: 60px;
  margin: 0;
  padding-top: 19px;
  .t-button {
    display: none;
  }
}
.formBox {
  :deep(.t-form) {
    .t-form__item {
      padding-left: 19px;
      margin-bottom: 16px;
      .t-form__label {
        font-size: 12px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        text-align: left;
        vertical-align: top;
      }
      .t-form__controls {
        height: 28px;
        .t-select__wrap {
          width: 342px !important;
        }
        .t-input {
          height: 28px;
          width: 342px;
        }
        .t-cascader {
          height: 28px;
          .t-input__wrap {
            height: 28px;
            .t-input {
              height: 28px;
              min-height: 28px;
              .t-tag {
                //background-color: red;
                height: 18px;
                border-radius: 4px;
                font-size: 10px;
                font-weight: 400;
                line-height: 18px;
                color: rgba(84, 82, 82, 1);
              }
            }
          }
        }
      }
      .c_label {
        .t-radio:nth-child(3) {
          margin-right: 0;
        }
      }
      .c_space {
        font-size: 12px;
        font-weight: 400;
        color: rgba(92, 91, 91, 1);
        .t-input__wrap {
          width: 60px;
          .t-input {
            width: 60px;
          }
        }
      }
      .t-radio__label {
        font-size: 12px;
        font-weight: 400;
        color: rgba(92, 91, 91, 1);
        .t-input__wrap {
          width: 60px;
          .t-input {
            width: 60px;
          }
        }
      }
    }

    .submitBox {
      position: fixed;
      bottom: -4px;
      right: 20px;
      .t-button--theme-default {
        background-color: white;
        border: none;
        width: 60px;
        height: 28px;
      }
      .t-button--theme-primary {
        width: 60px;
        height: 28px;
        opacity: 1;
        border-radius: 3px;
        background: rgba(30, 117, 254, 1);
      }
    }
  }
  .lineTitle {
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    padding-right: 20px;
    .line {
      display: inline-block;
      height: 21px;
      width: 3px;
      border-right: 3px;
      background: rgba(30, 117, 254, 1);
    }
    .title {
      display: inline-block;
      font-size: 13px;
      font-weight: 600;
      color: rgba(43, 43, 43, 1);
      margin-left: 16px;
    }
  }
}
.excludeIcon {
  position: relative;
  .tipBox {
    position: absolute;
    top: -28px;
    left: 28px;
  }
  .question-svg-icon {
    width: 12px;
    height: 12px;
  }
}
.rangeBox {
  :deep(.t-form__controls) {
    .t-space-item {
      line-height: 28px;
      span {
        font-size: 12px;
        font-weight: 400;
        color: rgba(92, 91, 91, 1);
      }
    }
    .t-input__wrap {
      width: 60px;
      height: 28px;
      .t-input {
        width: 60px !important;
        height: 28px !important;
      }
    }
  }
}
#speakBox {
  gap: 0;
  background: rgba(250, 250, 250, 1);
  height: 54px;
  line-height: 54px;
  width: 100%;
  padding-left: 12px;
  margin-right: 16px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(12, 13, 14, 1);
  border-radius: 2px;
  span {
    display: inline-block;
  }
  .input1 {
    display: inline-block;
    margin-left: 6px;
    width: 89px;
    height: 28px;
    :deep(.t-input) {
      width: 89px !important;
      .t-input__suffix {
        font-size: 12px;
        font-weight: 400;
        color: rgba(12, 13, 14, 1);
      }
    }
  }
  .input2 {
    display: inline-block;
    margin-left: 6px;
    width: 97px;
    height: 28px;
    :deep(.t-input) {
      width: 97px !important;
      .t-input__suffix {
        font-size: 12px;
        font-weight: 400;
        color: rgba(12, 13, 14, 1);
      }
    }
  }
  .select1 {
    display: inline-block;
    margin-right: 6px;
    width: 89px !important;
    :deep(.t-input) {
      width: 89px !important;
    }
  }
  .question-svg-icon {
    height: 12px;
    width: 12px;
    margin: 0 6px;
  }
}
#coolSpace {
  gap: 0;
  background: rgba(250, 250, 250, 1);
  height: 54px;
  line-height: 54px;
  width: 266px;
  padding-left: 12px;
  margin-right: 16px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(12, 13, 14, 1);
  border-radius: 2px;
  span {
    display: inline-block;
  }
  .input1 {
    display: inline-block;
    margin-left: 6px;
    width: 89px;
    height: 28px;
    :deep(.t-input) {
      width: 89px !important;
      .t-input__suffix {
        font-size: 12px;
        font-weight: 400;
        color: rgba(12, 13, 14, 1);
      }
    }
  }
  .question-svg-icon {
    height: 12px;
    width: 12px;
    margin: 0 6px;
  }
}
#speakTime {
  gap: 0;
  background: rgba(250, 250, 250, 1);
  height: 54px;
  line-height: 54px;
  width: 300px;
  padding-left: 12px;
  //margin-right: 16px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(12, 13, 14, 1);
  border-radius: 2px;
  span {
    display: inline-block;
  }
  .input1 {
    display: inline-block;
    margin-left: 6px;
    width: 99px;
    height: 28px;
    :deep(.t-input) {
      width: 99px !important;
      .t-input__suffix {
        font-size: 12px;
        font-weight: 400;
        color: rgba(12, 13, 14, 1);
      }
    }
  }
  .question-svg-icon {
    height: 12px;
    width: 12px;
    margin: 0 6px;
  }
}
</style>
